<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>文章列表</title>
        <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="./css/reset.css" />
        <link rel="stylesheet" href="./css/iconfont.css" />
        <link rel="stylesheet" href="./css/main.css" />
        <script src="./libs/jquery-1.12.4.min.js"></script>
        <script src="./libs/jquery.twbsPagination.js"></script>
        <!-- 引入模板引擎js文件 -->
        <script src="./libs/template-web.js"></script>
    </head>

    <body>
        <div class="container-fluid">
            <div class="common_title">文章列表</div>
            <div class="container-fluid common_con">
                <div class="row opt_btns">
                    <div class="col-xs-6">
                        <form class="form-inline">
                            <select
                                id="selCategory"
                                name=""
                                class="form-control input-sm"
                            >
                                <option value="">所有分类</option>
                                <option>未分类</option>
                                <option>奇趣事</option>
                                <option>会生活</option>
                                <option>爱旅行</option>
                            </select>
                            <select
                                id="selStatus"
                                name=""
                                class="form-control input-sm"
                            >
                                <option value="">所有状态</option>
                                <option value="草稿">草稿</option>
                                <option value="已发布">已发布</option>
                            </select>
                            <button
                                id="btnSearch"
                                class="btn btn-default btn-sm"
                            >
                                筛选
                            </button>
                        </form>
                    </div>
                    <div class="col-xs-6">
                        <a
                            href="article_release.html"
                            class="btn btn-success btn-sm pull-right"
                            id="release_btn"
                            >发表文章</a
                        >
                    </div>
                </div>
                <table
                    class="table table-striped table-bordered table-hover mp20"
                >
                    <thead>
                        <tr>
                            <th>标题</th>
                            <th>作者</th>
                            <th>分类</th>
                            <th class="text-center">发表时间</th>
                            <th class="text-center">状态</th>
                            <th class="text-center" width="100">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>王积千造统最头</td>
                            <td>杰克</td>
                            <td>奇趣事</td>
                            <td class="text-center">2017-06-08 07:08:46</td>
                            <td class="text-center">已发布</td>
                            <td class="text-center">
                                <a
                                    href="article_edit.html"
                                    class="btn btn-default btn-xs"
                                    >编辑</a
                                >
                                <a
                                    href="javascript:void(0);"
                                    class="btn btn-danger btn-xs delete"
                                    >删除</a
                                >
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="row text-center">
                    <ul class="pagination" id="pagination"></ul>
                    <!-- <p>没有数据!</p> -->
                </div>
            </div>
        </div>
    </body>
</html>
<script src="./libs/https.js"></script>
<script type="text/html" id="tpl-category">
    <option value="">所有分类</option>
    {{each}}
    <option value="{{$value.id}}">{{$value.name}}</option>
    {{/each}}
</script>
<script type="text/html" id="tpl-list">
    {{each}}
    <tr>
        <td>《{{$value.title}}》</td>
        <td>{{$value.author}}</td>
        <td>{{$value.category}}</td>
        <td class="text-center">{{$value.date}}</td>
        <td class="text-center">{{$value.state}}</td>
        <td class="text-center">
            <a
                href="article_edit.html?articleId={{$value.id}}"
                data-id="{{$value.id}}"
                class="btn btn-default btn-xs"
                >编辑</a
            >
            <a
                href="javascript:void(0);"
                data-id="{{$value.id}}"
                class="btn btn-danger btn-xs delete"
                >删除</a
            >
        </td>
    </tr>
    {{/each}}
</script>
<script>
    $(function () {
        $.ajax({
            type: "get",
            url: BigNew.category_list,
            success: function (backData) {
                // console.log(backData);
                if (backData.code == 200) {
                    let data = backData.data;
                    let htmlStr = template("tpl-category", data);
                    // console.log(htmlStr);
                    $("#selCategory").html(htmlStr);
                }
            },
        });
        let selPage = 1;
        function loadData(page) {
            $.ajax({
                type: "get",
                url: BigNew.article_query,
                data: {
                    // 指定文章类别
                    type: $("#selCategory").val(),
                    // 指定文章状态
                    state: $("#selStatus").val(),
                    // 指定返回的页码
                    page: page,
                    // 指定每页显示几条
                    perpage: 6,
                },
                success: function (backData) {
                    // console.log(backData);
                    if (backData.code == 200) {
                        if (backData.data.totalCount > 0) {
                            let data = backData.data.data;
                            let htmlStr = template("tpl-list", data);
                            $("tbody").html(htmlStr);

                            $("#pagination").twbsPagination("destroy");
                            $("#pagination").twbsPagination({
                                // 返回的数据中的总页数
                                totalPages: backData.data.totalPage,
                                startPage: page,
                                visiblePages: 10,
                                initiateStartPageClick: false,
                                first: "首页",
                                prev: "上一页",
                                next: "下一页",
                                last: "尾页",
                                onPageClick: function (event, page) {
                                    selPage = page;
                                    // 请求指定页码的数据,重新渲染页面
                                    // page: 当前被点击的页码
                                    loadData(page);
                                },
                            });
                        } else {
                            $("tbody").empty();
                            $("#pagination").html("当前分类没有数据");
                        }
                    }
                },
            });
        }
        loadData(1);

        $("#btnSearch").on("click", function (e) {
            e.preventDefault();
            loadData(1);
        });

        $("tbody").on("click", ".delete", function () {
            let dataid = $(this).attr("data-id");
            $.ajax({
                type: "post",
                url: BigNew.article_delete,
                data: {
                    id: dataid,
                },
                success: function (backData) {
                    // console.log(backData);
                    if (backData.code == 204) {
                        if ($("tbody tr").length > 1 || selPage == 1) {
                            loadData(selPage);
                        } else {
                            loadData(--selPage);
                        }
                    }
                },
            });
        });
    });
</script>
